<template>
	<div class="themes_content ad">
		<van-swipe :autoplay="3000" indicator-color="#FEB400" @change="onChange">
			<van-swipe-item v-for="(x, indexX) in dataList" :key="indexX">
				<div class="pic">
					<img :src="x">
				</div>
			</van-swipe-item>
			<div class="custom-indicator" slot="indicator">
				<div class="indicator_box">
					<ul>
						<li v-for="(x, indexX) in dataList" :class="{action: indexX==imgIndex}"></li>
					</ul>
				</div>
			</div>
		</van-swipe>
	</div>
</template>

<script>
	import { Toast, ActionSheet, Swipe, SwipeItem, } from 'vant';

	export default {
		data() {
			return {
				dataList: [],
				imgIndex: 0,
			};
		},
		watch: {},
		computed: {},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {
			this.init();
		},
		mounted() {},
		methods: {
			init() {
				this.dataList = [require('../../assets/images/public/001.jpg'), require('../../assets/images/public/002.jpg'), require('../../assets/images/public/lianyiqun.png')];
			},
			onChange(index) {
				this.imgIndex = index;
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.themes_content {
		position: relative;
		.pic {
			width: 100%;
			height: rem(360);
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			background: #eee;
			img {
				width: 100%;
			}
		}
	}
	
	.indicator_box {
		position: absolute;
		bottom: rem(10);
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		ul {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			li {
				margin: 0 rem(6);
				width: rem(16);
				height: rem(16);
				border-radius: 50%;
				background: #999;
			}
			.action {
				background: $tc;
			}
		}
	}
</style>